<template>
  <div class="__table">
    <el-popover
      v-if="control"
      popper-class="__table __table_popper"
      ref="popover4"
      :width="table.popover ? (table.popover.width || 300) : 300"
      :visible-arrow="false"
      placement="right"
      trigger="click">
      <el-form
        label-width="70px">
        <el-form-item label="自定列名" v-if="!table.autoColumnClose">
          <el-select
            class="__tabel_column"
            name="testSelet1"
            value-key="prop"
            multiple-limit.number="4"
            v-model="table.tableColumn" multiple placeholder="请选择">
            <el-option
              v-for="item in table.tableColumnAll"
              :key="item.prop"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <slot></slot>
        <el-form-item label="启用多选" prop="multiSelect" v-if="table.muti?!multiSelect:false">
          <el-switch
            v-model="table.multiSelect"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
          <el-button @click="clearMuti" type="danger" size="small" style="margin-left: 25px" v-if="table.multiSelect">清空选择</el-button>
        </el-form-item>
        <transition name="el-zoom-in-top">
          <slot name="multiSelect"></slot>
        </transition>
      </el-form>
      </el-popover>
    <button
      v-if="control"
      v-on:click.prevent
      class="__table_button"
      v-popover:popover4>
      <i class="el-icon-setting"></i></button>
    <el-table
      :data="table.data"
      v-loading="table.loading"
      :element-loading-text="table.loadingText || '拼命加载中'"
      :row-key="table.key"
      :show-summary="table.summary"
      :span-method="table.spanMethod"
      :ref="table.ref"
      @selection-change="handleSelectionChange"
      @expand-change="expandFuc"
      border>
      <slot name="expand" v-if="table.expand"></slot>
      <el-table-column
        type="expand"
        width="40px"
        v-if="!table.expand ? expand : false"
        class-name="expand">
        <template scope="s">
          <el-form labelWidth="120px" :inline="true" label-position="left">
            <el-form-item
              v-for="value in table.tableColumnAll"
              v-if="!value.disabled && s.row[value.prop]"
              :key="value.prop"
              :label="value.label">
              <template>
                <span v-if="!value.elTag && !value.elInput && !value.elInputNumber">
                  {{ value.formatter ? value.formatter(s.row, value.prop) : s.row[value.prop] }}
                </span>
                <el-input
                  v-if="value.elInput"
                  :type="value.elInput.type || 'text'"
                  :class="value.elInput.class"
                  v-model="s.row[value.prop]"
                  :placeholder="value.elInput.placeholder || value.label" spellcheck="false" auto-capitalize="off" auto-complete="off"
                  auto-correct="off"></el-input>
                <el-input-number
                  v-if="value.elInputNumber"
                  v-model="s.row[value.prop]"
                  @change="handleInputNumberChange"
                  :step="value.elInputNumber.step || 1"
                  :controls="typeof value.elInputNumber.controls === 'undefined' ? true : value.elInputNumber.controls[1]"
                  :min="(isNaN(value.elInputNumber.min)? s.row[ 'OldNumber_' + value.prop] : value.elInputNumber.min) || undefined"
                  :max="(isNaN(value.elInputNumber.max)? s.row[ 'OldNumber_' + value.prop] : value.elInputNumber.max) || undefined"></el-input-number>
                <el-tag v-if="value.elTag" :type="value.elTag.type || value.elTag.filterType(s.row[value.prop])">
                  {{ value.formatter ? value.formatter(s.row, value.prop) : s.row[value.prop] }}
                </el-tag>
              </template>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        width="40px"
        align="center"
        class-name="index"
        v-if="(!expand && control) || index"
        fixed="left">
      </el-table-column>
      <el-table-column
        v-if="multiSelect? true : table.multiSelect"
        type="selection"
        :reserve-selection="true"
        align="center"
        width="40">
      </el-table-column>
      <slot name="moreTop"></slot>
      <el-table-column
        v-for="value in table.tableColumn"
        :key="value.prop"
        :label="value.label"
        :min-width="value.minWidth||'0px'"
        :align="value.align||'center'"
        :formatter="value.formatter"
        :class-name="value.className"
        :prop="value.prop">
        <template scope="s">
          <span v-if="!value.elTag && !value.elInput && !value.select && !value.elInputNumber">
            {{ value.formatter ? value.formatter(s.row, value.prop) : s.row[value.prop] }}
          </span>
          <el-input
            v-if="value.elInput"
            :type="value.elInput.type || 'text'"
            :class="value.elInput.class"
            v-model="s.row[value.prop]"
            :placeholder="value.elInput.placeholder || value.label" spellcheck="false" auto-capitalize="off" auto-complete="off"
            auto-correct="off"></el-input>
          <el-tag
            v-if="value.elTag"
            :type="value.elTag.type || value.elTag.filterType(s.row[value.prop])">
            {{ value.formatter ? value.formatter(s.row, value.prop) : s.row[value.prop] }}
          </el-tag>
          <el-input-number
            v-if="value.elInputNumber"
            v-model="s.row[value.prop]"
            @change="handleInputNumberChange"
            :controls="typeof value.elInputNumber.controls === 'undefined' ? true : value.elInputNumber.controls[0]"
            :step="value.elInputNumber.step || 1"
            :min="(isNaN(value.elInputNumber.min)? s.row[ 'OldNumber_' + value.prop] : value.elInputNumber.min) || undefined"
            :max="(isNaN(value.elInputNumber.max)? s.row[ 'OldNumber_' + value.prop] : value.elInputNumber.max) || undefined"></el-input-number>
          <s-table-select
            v-if="value.select"
            :table="table"
            :value="value"
            :data="s.row"
            @selectRemote="selectRemote"
            @selectChange="selectChange">
          </s-table-select>
        </template>
      </el-table-column>
      <slot name="moreBottom"></slot>
      <slot name="operation"></slot>
    </el-table>
    <el-pagination
      v-if="pagination"
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="table.page"
      :page-sizes="table.pageSizes"
      :page-size="table.rows"
      :layout="table.layout"
      :small="table.small"
      :total="table.total">
    </el-pagination>
  </div>
</template>

<script>
  /**
   <el-select
   v-model="s.row[value.prop]"
   filterable
   remote
   :placeholder="table.select[value.prop].placeholder || value.label"
   :remote-method="selectRemote"
   @change="selectChange">
   <el-option
   v-for="item in table.select[value.prop]"
   :key="item[value.select.key || 'key']"
   :label="item[value.select.label || 'label']"
   :value="item[value.select.value || 'value']">
   </el-option>
   </el-select>
   */

  import sTableSelect from './s-table-select.vue';
  export default {
    props: {
      table: Object,
      control: { // 默认是否开启 控制中心
        type: Boolean,
        default: true,
      },
      expand: { // 默认是否显示 详细信息
        type: Boolean,
        default: true,
      },
      index: { // 默认是否显示 索引
        type: Boolean,
        default: false,
      },
      multiSelect: { // 默认是否开启 多选
        type: Boolean,
        default: false,
      },
      pagination: { // 默认是否开启 分页
        type: Boolean,
        default: true,
      },
    },
    components: {
      's-table-select': sTableSelect,
    },
    methods: {
      expandFuc (row, expanded) {
        this.$emit('expand', row, expanded);
      },
      sizeChange (val) {
        this.table.rows = val;
        this.$emit('http', this.table.ref);
      },
      currentChange (val) {
        this.table.page = val;
        this.$emit('http', this.table.ref);
      },
      handleSelectionChange (val) {
        this.table.multipleSelection = val;
      },
      handleInputNumberChange (a, b, c) {
        // console.log(a, b, c);
      },
      clearMuti () {
        this.$refs[this.table.ref].clearSelection();
      },
      selectChange (value, prop) {
        // console.count();
        this.$emit('selectChange', prop, value);
      },
      selectRemote (query, prop) {
        this.$emit('selectRemote', prop, query);
      },
    },
  };
</script>

<style lang="scss">
  .demo-table-expand {
    font-size: 0;
    background-color: #fbfdff;
    .el-form-item {
      margin-bottom: 0;
    }
    .__content {
      margin-bottom: 10px;
    }
  }

  .__table {
    position: relative;
    .el-form-item {
      .el-form-item__content {
        /*width: calc(100% - 10px);*/
        /*padding-left: 10px;*/
        /*width:100%;*/
        width:calc(100% - 80px);
        >span{
          word-wrap: break-word;
        }
      }
    }
    .__table_button {
      position: absolute;
      z-index: 4;
      width: 42px;
      color: #48576a;
      height: 50px;
      border: none;
      outline: none;
      background: rgba(0, 0, 0, 0);
      transition: all .5s;
      padding: 14px;
      &:hover{
        transform: scale(1.2) rotate(360deg);
        color: #4c77dc;
      }
    }
    .__table_index_button {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      height: 100%;
      border: none;
      background: rgba(0, 0, 0, 0);
      outline: none;
    }
    .el-table__fixed,.el-table__fixed-right {
      box-shadow: none;
    }
    .el-table-column--selection .cell {
      padding: 0;
    }
    .el-table__expanded-cell{
      .el-form-item {
        margin-bottom: 22px;
        width: calc(20% - 10px);
        .el-form-item__content {
          width:100%;
        }
      }
      z-index: 4;
      .el-form--inline .el-form-item__label{
        color: #4c77dc;
        font-weight: bolder;
      }
    }
    .index {
    }
    .operationMore{
      .cell {
        padding: 0;
      }
      .el-button--mini{
        min-width: 22px;
      }
    }
    .el-table__fixed-header-wrapper{
      .index >.cell{
        color: #eef1f6;
      }
    }
    .__reference{
      margin-left: 5px;
    }
    .el-input-number {
      min-width: 80px;
      width: 100%;
    }
  }

  .__table_popper {
    .el-date-editor {
      width: 100%;
    }
    .el-cascader {
      width: 100%;
    }
  }
</style>
